@extends('layouts.head')

@section('content')
<section class="content-header" id="content-header">
功能设置
</section>

<section class="content" id="content">
<div class="box box-solid" >
  <div class="box-header with-border">
    <el-button-group>
          <el-button @click="addUrlV = true " type="primary"  size="small" >添加</el-button>
          <el-button @click="getNew" type="primary"  size="small" >刷新</el-button>
    </el-button-group> 


</el-input>
  </div>
  <div class="box-body " >
         <el-table ref="multipleTable" :data="urls" border bordertooltip-effect="dark" border="true"  highlight-current-row
    @current-change="lookRow"  style="width: 100%;font-size: xx-small;" >
            <el-table-column  type="index" width="40" > </el-table-column>
             <el-table-column  prop="listRank" label="优先级" > </el-table-column>
            <el-table-column  prop="name" label="导航名" > </el-table-column>
            <el-table-column  prop="url" label="地址" > </el-table-column>
            <el-table-column fixed="right"  label="操作"  width="120">
              <template scope="scope">
                <el-button-group>
                   
                    <el-button  @click="editRow(scope.row.id, urls)" type="primary" icon=" " size="mini">编辑</el-button>
                    <el-button  @click="delRow(scope.row.id, urls)" type="danger" icon=" " size="mini">删除</el-button>
                </el-button-group>     
              </template>
            </el-table-column>
          </el-table>
         
  </div>
</div>
<div class="box box-solid">
  <div class="box-header with-border">
   二级目录 
  </div>
  <div class="box-body " style="height:400px">
         <el-table ref="multipleTable" :data="urlChrildren" border bordertooltip-effect="dark" border="true" @selection-change="checkOne"   style="width: 100%;font-size: xx-small;" >
         <el-table-column type="selection" width="55">  </el-table-column>
            <el-table-column  type="index" width="55" > </el-table-column>
            <el-table-column  prop="listRank" label="优先级" > </el-table-column>
            <el-table-column  prop="name" label="导航名" > </el-table-column>
            <el-table-column  prop="url" label="地址" > </el-table-column>
            <el-table-column fixed="right"  label="操作"  width="120">
              <template scope="scope">
                <el-button-group>
                    <el-button  @click="editRow(scope.row.id, urlChrildren)" type="primary" icon=" " size="mini">编辑</el-button>
                    <el-button  @click="delRow(scope.row.id, urlChrildren)" type="danger" icon=" " size="mini">删除</el-button>
                </el-button-group>     
              </template>
            </el-table-column>
          </el-table>
         
  </div>
</div>
<el-dialog title="添加导航" :visible.sync="addUrlV"   >
<el-form ref="form" :model="addUrlItem" label-width="80px">
  <el-form-item label="导航名">
    <el-input v-model="addUrlItem.name" size="small" ></el-input>
  </el-form-item>
  <el-form-item label="url">
    <el-input v-model="addUrlItem.url"  size="small" ></el-input>
  </el-form-item>
  <el-form-item label="优先级">
      <el-input v-model="addUrlItem.listRank"  size="small" ></el-input>
  </el-form-item>
  <el-form-item label="图标">
      <el-input v-model="addUrlItem.ico"  size="small" ></el-input>
  </el-form-item>
  <el-form-item label="父级">
       <el-select v-model="addUrlItem.pid" placeholder="请选择">
       <el-option v-bind:value="0"> 无 </el-option>
        <el-option
          v-for="option in urls"
          :key="option.id"
          :label="option.name"
          :value="option.id">
        </el-option>
      </el-select>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addUrlV = false">取 消</el-button>
    <el-button type="primary" @click="submitAddUrl">确 定 </el-button>
  </span>
</el-dialog>


<el-dialog title="修改导航" :visible.sync="editUrlV"   >
  <el-form ref="form" :model="editUrlItem" label-width="80px">
    <el-form-item label="导航名">
    <el-input v-model="editUrlItem.name" size="small" ></el-input>
  </el-form-item>
  <el-form-item label="url">
    <el-input v-model="editUrlItem.url"  size="small"  v-if="editUrlItem.url == 'parent' "  :disabled="true" ></el-input>
    <el-input v-model="editUrlItem.url"  size="small"  v-else  ></el-input>
  </el-form-item>
  <el-form-item label="优先级">
      <el-input v-model="editUrlItem.listRank"  size="small" ></el-input>
  </el-form-item>
  <el-form-item label="图标">
      <el-input v-model="editUrlItem.ico"  size="small" ></el-input>
  </el-form-item>
  <el-form-item label="父级"   v-if="editUrlItem.url == 'parent' " >
       <el-input  :disabled="true" ></el-input>
  </el-form-item>
  <el-form-item label="父级"   v-else >
      <el-select v-model="editUrlItem.pid" placeholder="请选择">
        <el-option v-bind:value="0"> 无 </el-option>
        <el-option
          v-for="option in urls"
          :key="option.id"
          :label="option.name"
          :value="option.id">
        </el-option>
      </el-select>
  </el-form-item>
  
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editUrlV = false">取 消</el-button>
    <el-button type="primary" @click="submitEditUrl">确 定 </el-button>
  </span>
</el-dialog>



</section>
<script >
    var content =new Vue({
        el:'#content',
        data:{
            date:'<?php echo date('Y-m-d') ?>',
            addUrlV:false,
            editUrlV:false,
            urls:[],
            urlChrildren:[],
            addUrlItem:{_token:'',name:'',url:'',pid:0,rank:0,listRank:99,ico:'',state:0,},
            editUrlItem:{_token:'',name:'',url:'',pid:'',rank:'',listRank:'',ico:'',state:0,},
            multipleSelection: [],
            selectUrlId:'',
        },
        created:function(){      
              this.$http.get('/url/getAll').then((response) => {this.urls=response.data; console.log('urls,success')},(response) =>{ }); 
               
        },
        methods:{
              getNew:function(){
                 this.$http.get('/url/getAll').then((response) => {this.urls=response.data; console.log('urls,success')},(response) =>{ }); 

              },
              search:function(){
                  console.log(this.searchWord);
                  this.$http.get('/url/search/'+this.searchWord).then((response) => {this.urls=response.data; this.urlsCount = this.urls.length;console.log('word,urls,success')},(response) =>{ console.log(response);}); 
                  
              } ,
              yesterday:function(){
                  console.log('yesterday');
              },
              tomorrow:function(){
                  console.log('tomorrow');
              },
              submitAddUrl:function(){
                  console.log('submitAddUrl');
                  this.addUrlV = false;
                  this.addUrlItem._token = '{{csrf_token()}}';
                  this.$http.post('/url/add',this.addUrlItem).then((response)=>{this.$notify.info(response.data);
                                  this.$http.get('/url/getAll').then((response) => {this.urls=response.data; console.log('urls,success')},(response) =>{ }); 

                        },(response) =>{ this.$notify.error('未知错误')});

              },
              submitEditUrl:function(){
                  console.log(this.editUrlItem);
                  this.editUrlV = false;
                  this.editUrlItem._token = '{{csrf_token()}}';
                  this.$http.post('/url/update/'+this.editUrlItem.id,this.editUrlItem).then((response)=>{this.$notify.info(response.data);
                                 this.$http.get('/url/getAll').then((response) => {this.urls=response.data; console.log(response.data)},(response) =>{ }); 
                                 this.$http.get('/url/getChildren/'+selectUrlId).then((response) => {this.urlChrildren=response.data;console.log(response.data)},(response) =>{ });   
                        },(response) =>{ });
              },
             
              cancelAddUrl:function(){
                  console.log('cancelAddUrl');
              },

              lookRow:function(val){
                  selectUrlId=val.id;
                  this.$http.get('/url/getChildren/'+val.id).then((response) => {this.urlChrildren=response.data;console.log(response.data)},(response) =>{ }); 
              },

              editRow:function(val){
                 this.editUrlV=true;
                 this.$http.get('/url/one/'+val).then((response) => {this.editUrlItem=response.data;console.log(this.editUrlItem)},(response) =>{ }); 
                  console.log(val);
              },

              delRow:function(val){
                  console.log(val);
                  this.$http.get('/url/del/'+val).then((response) => {this.$notify.info(response.data);
                                    this.$http.get('/url/getAll').then((response) => {this.urls=response.data; console.log('urls,success')},(response) =>{ }); 
                          },(response) =>{ }); 

              },
            
              checkChange:function(rows){
                     if (rows) {
                        rows.forEach(row => {
                          this.$refs.multipleTable.toggleRowSelection(row);
                        });
                      } else {
                        this.$refs.multipleTable.clearSelection();
                      }
              }, 
              checkOne:function (val) {
                console.log(val);
                this.multipleSelection = val;
              } ,
         },

  });
</script>




@endsection

@section('pagejs')

@endsection

        




